<template>
<view class="choose_dd">
	<view class="flex_c" :class="!isSS?'pp':''">
		<view class="ss"  v-if="isSS">
			<image class="ss_img" src="https://wqq103910.oss-cn-hangzhou.aliyuncs.com/images/fuzhou/image/index/index_ss.png" mode=""></image>
			<input :class="{input1:type=='policy'}" type="text" placeholder="请输入关键词" v-model="keywords" confirm-type="search" @confirm="changeK"/>
			<text @click="changeK">搜索</text>
			<text class="text1" v-if="type=='policy'" @click="topp">智能匹配</text>
		</view>
		<view class="flex" style="width: 100%;background: #fff;">
			<view v-if="type=='jr'" @click.stop="showChain" class="select pic" :class="query.type_id?'select_a':''">{{type_name||'类型'}}</view>
			<view v-else @click.stop="showChain" class="select pic" :class="[query.chain_id?'select_a':'',type=='company'?'pic1':'']">{{chain_name||'产业链'}}</view>
			<view v-if='showCity' @click="toPage(isQg?'chooseCity_qg':'chooseCity')" class="select pic" :class="[city_name?'select_a':'',type=='company'?'pic1':'']">{{city_name||'地区'}}</view>
			<view v-if="type=='company'" @click.stop="showChain(true)" class="select pic" :class="[query.type_id?'select_a':'',type=='company'?'pic1':'']">{{paixu_name||'排序'}}</view>
		</view>
	</view>
	<view class="chain_v" :class="[(isshow&&isSS)?'showChain':'',(isshow&&!isSS)?'showChain1':'',!isSS?'chain_v1':'']">
		<scroll-view scroll-y="true" class="list_div">
			<view v-if="type=='jr'" @click="changeJrType(item)" class="chain_item" :class="query.type_id==item.id?'active_item':''" v-for="item in typeJrList" :key="item.id">{{item.name}}</view>
			<view v-else-if="type=='company'&&isPx" @click="changePx(item)" class="chain_item" :class="paixu_name==item.name?'active_item':''" v-for="item in pxList" :key="item.id">{{item.name}}</view>
			<view v-else @click="changeChain(item)" class="chain_item" :class="query.chain_id==item.id?'active_item':''" v-for="item in chainList" :key="item.id">{{item.chain_name}}</view>
		</scroll-view>
	</view>
	<view class="zhan"  v-if="isSS"></view>
</view>
</template>

<script setup>
	import {jinrong} from '@/utils/api.js'
const props = defineProps({
	isshow:{
		type:Boolean,
		default:false
	},
	query:{
		type:Object,
		default:{
			chain_id:'',
		}
	},
	isQg:{
		type:Boolean,
		default:false
	},
	type:{
		type:String,
	},
	isSS:{
		type:Boolean,
		default:true
	},
	showCity:{
		type:Boolean,
		default:true
	},
})
const emit = defineEmits(["showChain","changeQuery"])

const city_name = ref('')
const chain_name = ref('')
const type_name = ref('')
const paixu_name = ref('评分')
const isPx = ref(false)


const keywords = ref('')
const chainList = uni.getStorageSync('myChain')

let typeJrList = reactive([])
let pxList = reactive([
	{name:'评分',id:1},
	{name:'距离',id:2},
])

jinrong.getFinanceType({role_id:uni.getStorageSync('role_id')}).then(res=>{
	res.data.unshift({name:'不限',type_id:0,id:0})
	typeJrList = res.data
})

chainList.unshift({chain_name:'不限',chain_id:'',id:''})

import {onLoad,onShow} from '@dcloudio/uni-app';

onLoad((option)=>{
	uni.setStorageSync('chooseCity',uni.getStorageSync('myCity'))
	if(option.keywords){
		keywords.value = option.keywords
		changeK()
	}
	if(option.chain_id){
		changeChainInit(option.chain_id)
	}
	// if(props.isQg){
	// 	uni.setStorageSync('chooseCity',{city_name:'全国',id:1})
	// }else{
	// }
})

onShow(()=>{
	const city = uni.getStorageSync('chooseCity')
	city_name.value = city.name||city.city_name
})


onBeforeUnmount(()=>{
	uni.setStorageSync('chooseCity',{city_name:uni.getStorageSync('myCity').city_name,id:uni.getStorageSync('myCity').id})
})

function topp(){
	uni.navigateTo({
		url:'/pages/policyList_page/policyList_page'
	})
}

function changeChainInit(id){
	let item = chainList.find(item=>item.id == id)
	changeChain(item)
}

function changeK(){
	let data = {keywords:keywords.value}
	changeQuery(data)
}
function changeQuery(data){
	let obj = Object.assign(props.query,data)
	emit('changeQuery',obj)
}
function showChain(type){
	if(type === true){
		isPx.value = true
	}else{
		isPx.value = false
	}
	emit('showChain')
}
function changeChain(item){
	chain_name.value = item.chain_name 
	changeQuery({chain_id:item.id})
}

function changeJrType(item){
	type_name.value = item.name 
	changeQuery({type_id:item.id})
}

function changePx(item){
	paixu_name.value = item.name 
	changeQuery({paixu:item.id})
}

function toPage(url){
	uni.navigateTo({
		url:`/pages/${url}/${url}`
	})
}
</script>

<style lang="scss" scoped>
.choose_dd{
	position: relative;
}
.chain_v{
	position: fixed;
	top: -280px;
	box-shadow: 0 4px 4px 0 rgba($color: #000000, $alpha: .3);
	z-index: 100;
	width: calc(100% - 20px);
	padding: 0 0px 0px 20px;
	height: 0px;
	transition: all 0.5s;
	opacity: 0;
	border-radius: 0 0 20px 20px;
	background-color: #fff;
}
.chain_v1{
	position: absolute;
	z-index: 11;
	top: 26px;
	height: 0;
}

.list_div{
	max-height: 100%;
	overflow: auto;
	-webkit-overflow-scrolling: touch;
	z-index:1;
	.chain_item{
		margin: 14px 0;
		color: #999;
		font-size: 15px;
	}
	.active_item{
		font-weight: bold;
		color: #40A9FF;
		position: relative;
		font-size: 16px;
		&::after{
			content: ' ';
			position: absolute;
			right: 20px;
			width: 16px;
			height: 8px;
			top: 2px;
			border-left: 3px solid #40A9FF;
			border-bottom: 3px solid #40A9FF;
			transform: rotate(-45deg);
		}
	}
}


.showChain{
	top: 72px;
	opacity: 1;
	height: 300px;
	box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.1);
}
.showChain1{
	top: 32px;
	opacity: 1;
	height: 300px;
	box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.1);
}
.zhan{
	width: 100%;
	height: 72px;
}
.flex_c{
		width: 100%;
		// height: 44px;
		display: flex;
		justify-content: space-between;
		align-items: center;
		position: fixed;
		flex-wrap: wrap;
		top: 0;
		z-index: 1000;
		background-color: #3BA7FF;
		box-shadow: 0px 2px 5px 0 #ddd;
		.ss{
			width: 100%;
			display: flex;
			align-items: center;
			margin: 0 10px;
			margin-bottom: 4px;
			position: relative;
			background-color: #fff;
			border-radius: 15px;	
			padding-left: 14px;
			.ss_img{
				width: 16px;
				height: 16px;
			}
			input{
				width: calc(80% - 20px);
				padding-left: 10px;
				height: 32px;
				font-size: 15px;
			}
			.input1{
				width: calc(50% - 20px);
			}
			text{
				position: absolute;
				display: inline-block;
				right: 3px;
				height: 28px;
				line-height: 28px;
				border-radius: 14px;
				width: 60px;
				background: linear-gradient(90deg, #40A9FF99 0%, #40A9FF 100%);
				color: #fff;
				text-align: center;
				z-index: 10;
			}
			.text1{
				width: 80px;
				right: 66px;
			}
		}
}

.pp{
	position: relative;
	box-shadow: 0px 0px 0px 0 #ddd;
	z-index: 10;
}
.pic{
	width: calc(50% - 20px) !important;
	padding: 0 10px;
	text-align: center;
}
.pic1{
	width: 33.3% !important;
	padding: 0 !important;
	text-align: center;
}
// .pic1{
// 	width: 100%;
// 	margin-bottom: 8px;
// }
.select{
	// width: calc(100% - 20px);
	height: 36px;
	color: #333;
	line-height: 36px;
	background-color: #fff;
	position: relative;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	font-size: 15px;
	&::after{
		content: ' ';
		position: absolute;
		background: url(https://wqq103910.oss-cn-hangzhou.aliyuncs.com/images/4/2020/09/xiala.png) no-repeat;
		background-size: 100% 100%;
		width: 8px;
		height: 8px;
		top: 14px;
		margin-left: 10px;
	}
}
.select_a{
	color: #333;
}
</style>